<template>
  <div class="dialog-main">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="180px"
      class="w800p"
    >
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="参与商品类型" prop="appoint_type">
        <el-radio-group v-model="form.appoint_type">
          <el-radio label="1" :key="1">全部商品</el-radio>
          <!-- <el-radio label="2" :key="2">全部自营商品</el-radio> -->
          <el-radio label="3" :key="3">指定商品参加</el-radio>
          <el-radio label="4" :key="4">指定商品不参加</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="" v-if="form.appoint_type == 3">
        <el-select
          v-model="form.appoint_goods"
          placeholder="请选择商品"
          style="width: 100%"
          multiple
          filterable
        >
          <el-option
            v-for="item in appoint_goods1"
            :label="item.productName"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="" v-if="form.appoint_type == 4">
        <el-select
          v-model="form.noappoint_goods"
          placeholder="请选择商品"
          style="width: 100%"
          multiple
          filterable
        >
          <el-option
            v-for="item in noappoint_goods1"
            :label="item.productName"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="满减方式" prop="rule_type">
        <el-radio-group v-model="form.rule_type" @change="change1">
          <el-radio label="1" :key="1">阶梯满减</el-radio>
          <el-radio label="2" :key="2">循环满减</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 阶梯打折 -->
      <el-form-item label="" prop="jtDiscount_type" v-if="form.rule_type == 1">
        <el-radio-group v-model="form.jtDiscount_type" @change="change2">
          <el-radio label="2" :key="2">打折</el-radio>
          <el-radio label="1" :key="1">减钱</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        label=""
        v-if="form.jtDiscount_type == 2 && form.rule_type == 1"
      >
        <el-card
          style="margin-bottom: 20px"
          v-for="(item, index) in form.discount_rule"
          :key="index"
        >
          <el-row style="border-bottom: 1px solid #f2f4f8">
            <el-col :span="21"> 第{{ index + 1 }}级优惠 </el-col>
            <el-col :span="3"
              ><el-button @click.prevent="remove(item)">删除</el-button></el-col
            >
          </el-row>

          <el-form-item
            label="优惠门槛"
            :prop="'discount_rule.' + index + '.min_money'"
            :rules="[
              {
                required: true,
                message: '优惠门槛不能为空',
                trigger: 'blur',
              },
            ]"
            label-width="140px"
            style="padding-top: 20px"
          >
            <span style="width: 35px; display: inline-block">满</span>
            <el-input
              v-model.number="item.min_money"
              style="width: 200px"
            ></el-input>
            <span style="width: 17px; display: inline-block"></span> 元
          </el-form-item>

          <el-form-item
            label="打折内容"
            :prop="'discount_rule.' + index + '.discount'"
            :rules="{
              required: true,
              message: '打折内容不能为空',
              trigger: 'blur',
            }"
            label-width="140px"
            style="padding-top: 20px"
          >
            <span style="width: 35px; display: inline-block">打</span>
            <el-input v-model="item.discount" style="width: 200px"></el-input>
            <span style="width: 17px; display: inline-block"></span> 折
          </el-form-item>
        </el-card>

        <el-button type="primary" @click="addDis">添加优惠</el-button>
      </el-form-item>

      <!-- 阶梯减钱 -->
      <el-form-item
        label=""
        prop="discount_type"
        v-if="form.jtDiscount_type == 1 && form.rule_type == 1"
      >
        <el-card
          style="margin-bottom: 20px"
          v-for="(item, index) in form.discount_rule"
          :key="index"
        >
          <el-row style="border-bottom: 1px solid #f2f4f8">
            <el-col :span="21"> 第{{ index + 1 }}级优惠 </el-col>
            <el-col :span="3"
              ><el-button @click.prevent="remove1(item)"
                >删除</el-button
              ></el-col
            >
          </el-row>

          <el-form-item
            label="优惠门槛"
            :prop="'discount_rule.' + index + '.min_money'"
            :rules="[
              {
                required: true,
                message: '优惠门槛不能为空',
                trigger: 'blur',
              },
            ]"
            label-width="140px"
            style="padding-top: 20px"
          >
            <span style="width: 35px; display: inline-block">满</span>
            <el-input
              v-model.number="item.min_money"
              style="width: 200px"
            ></el-input>
            <span style="width: 17px; display: inline-block"></span> 元
          </el-form-item>

          <el-form-item
            label="优惠内容"
            :prop="'discount_rule.' + index + '.cut'"
            :rules="[
              {
                required: true,
                message: '优惠内容不能为空',
                trigger: 'blur',
              },
            ]"
            label-width="140px"
            style="padding-top: 20px"
          >
            <span style="width: 35px; display: inline-block">减</span>
            <el-input v-model.number="item.cut" style="width: 200px"></el-input>
            <span style="width: 17px; display: inline-block"></span> 元
          </el-form-item>
        </el-card>

        <el-button type="primary" @click="addDis">添加优惠</el-button>
      </el-form-item>

      <!-- end -->

      <!-- 循环 -->
      <el-form-item>
        <el-form-item
          label="优惠门槛"
          :prop="'loop_discount_rule.' + 'min_money'"
          :rules="[
            {
              required: true,
              message: '优惠门槛不能为空',
              trigger: 'blur',
            },
          ]"
          v-if="form.rule_type == 2"
        >
          <span style="width: 35px; display: inline-block">满</span>
          <el-input
            v-model.number="form.loop_discount_rule.min_money"
            style="width: 200px"
          ></el-input>
          <span style="width: 17px; display: inline-block"></span> 元
        </el-form-item>

        <el-form-item
          label="优惠内容"
          :prop="'loop_discount_rule.' + 'cut'"
          :rules="[
            {
              required: true,
              message: '优惠内容不能为空',
              trigger: 'blur',
            },
          ]"
          v-if="form.rule_type == 2"
          style="padding-top: 20px"
        >
          <span style="width: 35px; display: inline-block">减</span>
          <el-input
            v-model.number="form.loop_discount_rule.cut"
            style="width: 200px"
          ></el-input>
          <span style="width: 17px; display: inline-block"></span> 元
        </el-form-item>
      </el-form-item>

      <!-- end -->
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="form.status"
          placeholder="请选择状态"
          style="width: 200px"
        >
          <el-option label="上架" value="1"></el-option>
          <el-option label="下架" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="start_at">
        <el-date-picker
          v-model="form.start_at"
          type="datetime"
          placeholder="选择日期时间"
          style="width: 200px"
          @input="change3"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="end_at">
        <el-date-picker
          v-model="form.end_at"
          type="datetime"
          placeholder="选择日期时间"
          style="width: 200px"
          @input="change4"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="内容" prop="content">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="form.content"
          maxlength="300"
          show-word-limit
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" size="mini" @click="submitForm('form')"
          >确定</el-button
        >
        <el-button size="mini" @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { createInstitution, editInstitution, getGood } from "@/api/institution";
import { toDate, toDate1 } from "@/filters";
import { number } from "echarts/lib/export";
export default {
  data() {
    return {
      appoint_goods1: [],
      noappoint_goods1: [],
      form: {
        id: "",
        name: "",
        appoint_type: "",
        status: "",
        start_t: "",
        end_t: "",
        appoint_goods: [],
        noappoint_goods: [],
        rule_type: "",
        jtDiscount_type: "",
        discount_rule: [
          {
            discount_type: "",
            discount: "",
            min_money: "",
            cut: "",
          },
        ],
        loop_discount_rule: {
          min_money: "",
          cut: "",
        },
        content: "",
      },
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        appoint_type: [
          { required: true, message: "请选择参与商品类型", trigger: "change" },
        ],
        rule_type: [
          {
            required: true,
            message: "请选择满减方式",
            trigger: "change",
          },
        ],
        jtDiscount_type: [
          {
            required: true,
            message: "请选阶梯满减方式",
            trigger: "change",
          },
        ],

        min_money: [
          {
            required: true,
            message: "请填写优惠门槛",
            trigger: "blur",
          },
        ],
        cut: [
          {
            required: true,
            message: "请填写满减内容",
            type: "number",
            trigger: "blur",
          },
        ],
        discount: [
          {
            required: true,
            message: "请填写打折内容",
            type: "number",
            trigger: "blur",
          },
        ],
        status: [
          {
            required: true,
            message: "请选择状态",
            trigger: "change",
          },
        ],
        start_at: [
          {
            required: true,
            message: "请选择开始时间",
            trigger: "blur",
          },
        ],
        end_at: [
          {
            required: true,
            message: "请填写结束时间",
            trigger: "blur",
          },
        ],
        content: [
          {
            required: true,
            message: "请填写内容",
            trigger: "blur",
          },
        ],
      },
    };
  },
  props: {
    detailData: Object,
  },
  created() {
    if (JSON.stringify(this.detailData) !== "{}") {
      this.form.id = this.detailData.id;
      this.form.name = this.detailData.name;
      this.form.appoint_type = this.detailData.appoint_type.toString();
      this.form.status = this.detailData.status.toString();
      this.form.content = this.detailData.content.toString();
      this.form.appoint_goods = this.detailData.appoint_goods;
      this.form.noappoint_goods = this.detailData.noappoint_goods;

      this.form.rule_type = this.detailData.rule_type.toString();
      this.form.discount_rule = this.detailData.discount_rule;
      this.form.jtDiscount_type =
        this.detailData.discount_rule[0]?.discount_type;
      this.form.loop_discount_rule = this.detailData.loop_discount_rule;

      this.form.start_at = toDate1(this.detailData.start_at);
      this.form.end_at = toDate1(this.detailData.end_at);
    }
    this.getGoods();
  },
  methods: {
    getGoods() {
      getGood().then((res) => {
        console.log(res);
        this.appoint_goods1 = res.data;
        this.noappoint_goods1 = res.data;
        this.loading = false;
      });
    },

    change3(e) {
      console.log(e);
      this.$set(this.form, "start_at", e);
      this.$forceUpdate();
    },
    change4(e) {
      this.$set(this.form, "end_at", e);
      this.$forceUpdate();
    },

    submitForm(formName) {
      const requestParams = {};
      requestParams["name"] = this.form.name;
      requestParams["appoint_type"] = this.form.appoint_type;
      requestParams["status"] = this.form.status;
      requestParams["start_at"] = toDate(this.form.start_at);
      requestParams["end_at"] = toDate(this.form.end_at);
      requestParams["content"] = this.form.content;
      requestParams["appoint_goods"] = this.form.appoint_goods;
      requestParams["noappoint_goods"] = this.form.noappoint_goods;
      requestParams["rule_type"] = this.form.rule_type;
      requestParams["loop_discount_rule"] = { ...this.form.loop_discount_rule };

      let arr = this.form.discount_rule;
      arr.map((i) => {
        i.discount_type = this.form.jtDiscount_type;
      });
      requestParams["discount_rule"] = arr;

      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (JSON.stringify(this.detailData) !== "{}") {
            requestParams["id"] = this.form.id;
            editInstitution(requestParams).then(() => {
              this.resetData();
              this.$emit("submitData");
            });
          } else {
            createInstitution(requestParams).then(() => {
              this.resetData();
              this.$emit("submitData");
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetData() {
      this.form.name = null;
      this.form.appoint_type = null;
      this.form.status = null;
      this.form.start_at = null;
      this.form.end_at = null;
      this.form.appoint_goods = [];
      this.form.noappoint_goods = [];
      this.form.rule_type = null;
      this.form.loop_discount_rule = {};
      this.form.discount_rule = [
        {
          discount_type: "",
          discount: "",
          min_money: "",
          cut: "",
        },
      ];
      this.form.content = null;
    },
    cancel() {
      this.$emit("cancel");
    },

    addDis() {
      this.form.discount_rule.push({
        discount_type: "",
        discount: "",
        min_money: "",
        cut: "",
      });
    },

    remove(item) {
      var index = this.form.discount_rule.indexOf(item);
      if (index !== -1) {
        this.form.discount_rule.splice(index, 1);
      }
    },
    remove1(item) {
      var index = this.form.discount_rule.indexOf(item);
      if (index !== -1) {
        this.form.discount_rule.splice(index, 1);
      }
    },

    change1(e) {
      if (e == 1) {
        this.form.loop_discount_rule = {};
      }
      if (e == 2) {
        this.form.discount_rule = [
          {
            discount_type: "",
            discount: "",
            min_money: "",
            cut: "",
          },
        ];
      }
    },

    change2(e) {
      this.form.discount_rule = [
        {
          discount_type: "",
          discount: "",
          min_money: "",
          cut: "",
        },
      ];
    },
  },
};
</script>
